---
interface Props {
    btnName: string;
    btnType: string;
    dataHot: boolean;
    dataUrl: string;
    dataLogo: string;
    dataHomePage:string;
    dataDescription: string;
    dataPlaceholder: string;
}
const { btnName, btnType, dataHot, dataUrl, dataLogo, dataHomePage, dataDescription, dataPlaceholder} = Astro.props;
const btnClass =
    btnType +
    " text-white btn font-medium cursor-pointer rounded-lg text-sm px-5 py-2.5 me-2 mb-2";
---

<div class={btnClass} data-hot={dataHot} data-url={dataUrl} data-logo={dataLogo} data-homepage={dataHomePage} data-description={dataDescription} data-placeholder={dataPlaceholder}>
    <span class="mt-2 block select-none">{btnName}</span>
</div>

<style>
    /* 实现按钮上方三角形 */
    .btn::before {
        content: " ";
        display: flex;
        margin: 0 auto;
        width: 20px;
        height: 20px;
        background: #fff;
        opacity: 0;
        transform: rotate(45deg);
    }

    div.active::before {
        content: " ";
        display: flex;
        margin: 0 auto;
        width: 20px;
        height: 20px;
        background: #fff;
        opacity: 1;
        transform: rotate(45deg);
    }
</style>
